<template>
	<view class="contain">

	<view class="flex-col section_8">
	  <view class="flex-row items-center section_9 space-x-6">
	    <text class="font_3">热门</text>
	    <text class="font_4 text_10">更多好商品推荐</text>
	  </view>
	  <view class="grid_2">
	    <view class="flex-col grid-item_2" @tap.stop="go('/pages/goods/detail?id='+item.id)" v-for="(item, index) of list" :key="index">
	      <image  mode="aspectFill"
	        class="image_11"
	        :src="item['mainImg']"
	      />
	      <text class="font_10 text_11">{{item.title}}</text>
	      <view class="flex-row items-baseline group_7 view_5">
	        <text class="font_8">价格：</text>
	        <text class="font_9">￥</text>

	          <text class="font_6 text_9">{{item.price | price}}</text>
	      </view>
	    </view>

	  </view>
	</view>


	</view>
</template>
<style scoped>
/* recommend */

.font_3 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 30rpx;
  color: #081329;
}
.font_4 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
}
.group_7 {
  padding: 0 20rpx;
}
.font_8 {
  font-size: 24rpx;
  font-family: HarmonyOSSansSC;
  line-height: 15rpx;
  color: #666e7a;
}
.font_9 {
  font-size: 16rpx;
  font-family: HarmonyOSSansSC;
  line-height: 12rpx;
  color: #ff5733;
}
.group_8 {
  line-height: 24rpx;
  height: 24rpx;
}
.font_6 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 21rpx;
  color: #ff5733;
}
.font_7 {
  font-size: 32rpx;
  font-family: HarmonyOSSansSC;
  line-height: 24rpx;
  color: #ff5733;
}
.text_9 {
  word-break: break-all;
}
.section_8 {
  padding-bottom: 108rpx;
  background-color: #ffffff;
  border-radius: 20rpx;
  filter: drop-shadow(0px 0px 8rpx #ffbd5208);
  overflow: hidden;
  border: solid 1.2rpx #cfd5e640;
}
.section_9 {
  padding: 28rpx 24rpx 40rpx;
  background-image: linear-gradient(180deg, #d3dbf21f -36.1%, #ffffff75 92.3%);
}
.space-x-6 > view:not(:first-child),
.space-x-6 > text:not(:first-child),
.space-x-6 > image:not(:first-child) {
  margin-left: 12rpx;
}
.text_10 {
  color: #666e7a;
  line-height: 23rpx;
  opacity: 0.6;
}
.grid_2 {
  padding-bottom: 532rpx;
  height: 2120rpx;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  row-gap: 27rpx;
}
.grid-item_2 {
  padding: 12rpx 8rpx 6rpx 22rpx;
}
.image_11 {
  width: 324rpx;
  height: 318rpx;
}
.font_10 {
  font-size: 28rpx;
  font-family: HarmonyOSSansSC;
  line-height: 44rpx;
  color: #081329;
  height:40rpx;
  display:block;
  overflow:hidden;
  text-overflow:ellipsis;//文本溢出显示省略号
}
.text_11 {
  margin: 16rpx 24rpx 0 16rpx;
}
.view_5 {
  margin-top: 16rpx;
}
</style>
<script>
	const $ = require('@/utils/api.js');
	const API = require('@/utils/api/shops.js').default;
	let self;
	export default {
		props: {
			// isShow: { type: Boolean, default: true },
			// showLogin: { type: Boolean, default: false },
			// 检测类型 + 其他验证
			stype: {
				type: Number,
				required: false,
				validator: function(value) {
					return value >= 0
				}
			}
		
		},
		computed: {
		    style() {
		        let _style = `height: ${this.customBarH}px;`
		        return _style
		    }
		},
		data() {
			return {
				list: []
			};
		},
		onLoad: function() {
			self = this;
		},
		created() {
			self = this;
			self.getList();
		},
		methods: {

			splitArr(dataArr,colomns){
				// var dataArr = ['a','b','c','d','e','f','g'];

				var result = [];

				// var colomns = n;

				// js 把一个数组分割成 n 个一组
				for( var i = 0, len = dataArr.length; i < len; i += colomns ) {
				  result.push( dataArr.slice( i, i + colomns ) );
				}
				return result;
			},
			getList() {
				self = this;
				// console.log(API.searchGoodsApi)
				$.ajax({
					url: API.searchGoodsApi,
					data: {
						shopId: '',

						// catePid: self.cates[index]['id'],
							sort:'add_time  desc',
						page: 1,
						pageSize: 24,
						stype:self.stype
					},
					method: 'GET',
					success(res) {
						 self.list = res.data.list ? res.data.list : [];

					}
				})
			},
			init() {},
		},
		computed: {
			i18n() {
				return this.$t('index')
			},
		},
		mounted() {},
		destroyed() {},
		components: {},
		onPullDownRefresh() {
		},
		onReachBottom() {
		}
	}
</script>
